<section ion-list *ngIf="question.text || question.text === ''">
    <!-- Content is outside the core-loading to let the script calculate drag items position -->
    <core-loading [hideUntil]="question.loaded"></core-loading>

    <ion-item text-wrap class="addon-qtype-ddwtos-container" [ngClass]="{invisible: !question.loaded}">
        <p *ngIf="!question.readOnly" class="core-info-card" icon-start>
            <ion-icon name="information-circle"></ion-icon>
            {{ 'core.question.howtodraganddrop' | translate }}
        </p>
        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()"></core-format-text></p>
        <core-format-text *ngIf="question.answers" [component]="component" [componentId]="componentId" [text]="question.answers" [filter]="false" (afterRender)="answersRendered()"></core-format-text>
        <div class="drags"></div>
    </ion-item>
</section>
